<template>
  <el-table :data="pagedData" style="width: 100%" v-loading="loading">
    <el-table-column fixed prop="date" label="日期" width="150" />
    <el-table-column prop="name" label="姓名" width="120" />
    <el-table-column prop="sex" label="性别" width="120" />
    <el-table-column prop="phonenumber" label="手机号" width="120" />
    <el-table-column prop="stunumber" label="学号" width="600" />
    <el-table-column prop="zip" label="压缩包" width="120" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
        <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="search-bar">
    <el-select v-model="searchType" style="width: 100px; margin-right: 8px">
      <el-option
        v-for="item in searchOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-input
      v-model="input"
      style="width: 180px"
      :placeholder="`请输入${searchOptions.find((opt) => opt.value === searchType)?.label}`"
    />
    <el-button :icon="Search" circle @click="onSearch" style="margin-left: 8px" />
    <el-button type="default" @click="onReset" style="margin-left: 8px">重置</el-button>
  </div>

  <hr class="my-4" />

  <div class="demo-pagination-block">
    <div class="demonstration"></div>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[1, 2, 5, 10]"
      layout="sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
      size-change-text="条/页"
    />
  </div>

  <el-dialog v-model="editDialogVisible" title="修改信息" width="400px">
    <el-form :model="editForm" label-width="80px">
      <el-form-item label="日期">
        <el-input v-model="editForm.date" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="editForm.name" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="editForm.sex" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="editForm.phonenumber" />
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="editForm.stunumber" />
      </el-form-item>
      <el-form-item label="压缩包">
        <el-input v-model="editForm.zip" />
      </el-form-item>
      <el-form-item label="标签">
        <el-input v-model="editForm.tag" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveEdit">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, reactive, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { showCustomMessage } from '../../utils/message'
import axios from 'axios'

const input = ref('')
const searchValue = ref('')
const searchType = ref('name')
const searchOptions = [
  { label: '姓名', value: 'name' },
  { label: '性别', value: 'sex' },
  { label: '学号', value: 'stunumber' },
  { label: '手机号', value: 'phonenumber' },
]

const onSearch = () => {
  searchValue.value = input.value
  currentPage.value = 1 // 搜索时重置到第一页
  fetchData() // 重新获取数据
}

// 新增重置方法
const onReset = () => {
  input.value = ''
  searchValue.value = ''
  searchType.value = 'name'
  currentPage.value = 1
  fetchData() // 重新获取数据
}

const currentPage = ref(1)
const pageSize = ref(5) // 每页显示5条
const total = ref(0) // 数据总量
const loading = ref(false) // 加载状态

// 从后端获取数据的方法
const fetchData = async () => {
  loading.value = true
  try {
    const response = await axios.get('/api/students', {
      params: {
        page: currentPage.value,
        pageSize: pageSize.value,
        searchType: searchType.value,
        searchValue: searchValue.value,
      },
    })

    if (response.data.code === 200) {
      tableData.value = response.data.data.list
      total.value = response.data.data.total
    }
  } catch (error) {
    showCustomMessage('获取数据失败', 'error')
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 页面加载时获取数据
onMounted(() => {
  fetchData()
})

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom1',
    sex: '女',
    phonenumber: '000000001',
    stunumber: '111000001',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    sex: '女',
    phonenumber: '000000002',
    stunumber: '111000002',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    sex: '男',
    phonenumber: '000000003',
    stunumber: '111000003',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    sex: '女',
    phonenumber: '000000004',
    stunumber: '111000004',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-03',
    name: 'Tom5',
    sex: '女',
    phonenumber: '000000005',
    stunumber: '111000005',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom6',
    sex: '男',
    phonenumber: '000000006',
    stunumber: '111000006',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom7',
    sex: '男',
    phonenumber: '000000007',
    stunumber: '111000007',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom8',
    sex: '女',
    phonenumber: '000000008',
    stunumber: '111000008',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-03',
    name: 'Tom9',
    sex: '男',
    phonenumber: '000000009',
    stunumber: '111000009',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom10',
    sex: '男',
    phonenumber: '000000010',
    stunumber: '111000010',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom11',
    sex: '女',
    phonenumber: '000000011',
    stunumber: '111000011',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom12',
    sex: '女',
    phonenumber: '000000012',
    stunumber: '111000012',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-03',
    name: 'Tom13',
    sex: '女',
    phonenumber: '000000013',
    stunumber: '111000013',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom14',
    sex: '男',
    phonenumber: '000000014',
    stunumber: '111000014',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom15',
    sex: '女',
    phonenumber: '000000015',
    stunumber: '111000015',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom16',
    sex: '女',
    phonenumber: '000000016',
    stunumber: '111000016',
    zip: 'CA 90036',
    tag: 'Office',
  },
])

// 由于现在从后端获取分页数据，不再需要前端过滤和分页计算
const pagedData = computed(() => tableData.value)

const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1 // 切换每页条数时重置到第一页
  fetchData() // 重新获取数据
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchData() // 重新获取数据
}

// 编辑功能：弹窗编辑（简单实现为弹出输入框）
const handleEdit = (row: any) => {
  // 记录当前编辑项的索引
  editIndex = tableData.value.findIndex((item) => item.stunumber === row.stunumber)
  // 拷贝数据到表单
  Object.assign(editForm, row)
  editDialogVisible.value = true
}

// 删除功能
const handleDelete = (row: any) => {
  const idx = tableData.value.findIndex((item) => item.stunumber === row.stunumber)
  if (idx !== -1) {
    tableData.value.splice(idx, 1)
    showCustomMessage('删除成功', 'success')
  }
}

const editDialogVisible = ref(false)
const editForm = reactive({
  date: '',
  name: '',
  sex: '',
  phonenumber: '',
  stunumber: '',
  zip: '',
  tag: '',
})
let editIndex = -1

const saveEdit = () => {
  if (editIndex !== -1) {
    tableData.value[editIndex] = { ...editForm }
    showCustomMessage('修改成功', 'success')
    editDialogVisible.value = false
  }
}
</script>

<style scoped>
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
</style>
